<template>
  <div class="execution">
    <basic-container>
      <el-row >
        <el-col :span="13"><div class="grid-content bg-purple">当前版本</div></el-col>
        <el-col :span="11"><div class="grid-content bg-purple">历史版本</div></el-col>
      </el-row>
      <div id="view" style="height: 100%; width: 100%;"></div>
      <p></p>
      <el-button type="primary" @click="saveUpdate" :loading="fullscreenLoading">回滚</el-button>
      <el-button type="info" @click="closeCodeCompareDialog">取消</el-button>
    </basic-container>
  </div>
</template>
<script>
  import { updateCodeTemplate } from '@/api/code-template'
  import CodeMirror from 'codemirror'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/addon/merge/merge.js'
  import 'codemirror/addon/merge/merge.css'
  import 'codemirror/theme/cobalt.css'
  import DiffMatchPatch from 'diff-match-patch'
  window.diff_match_patch = DiffMatchPatch
  window.DIFF_DELETE = -1
  window.DIFF_INSERT = 1
  window.DIFF_EQUAL = 0
  export default {
    name: 'Diff',
    props: {
      selectHisRecord: null,
    },
    watch: {
      selectHisRecord: {
        deep: true,  // 深度监听
        handler(newVal,oldVal) {
          this.templateCodeId = newVal.templateCodeId
          this.hisTemplateCodeId = newVal.id
          this.preCode = newVal.hisContent
          this.currentCode = newVal.currentContent
          this.coder.edit.setValue(this.currentCode)
          this.coder.right.orig.setValue(this.preCode)
          console.log(newVal.hisContent)
        }
      }
    },
    data () {
      return {
        preCode: null,
        currentCode: null,
        templateCodeId: null,
        hisTemplateCodeId: null,
        coder: null,
        fullscreenLoading: false
      }
    },
    mounted () {
      this.templateCodeId = this.selectHisRecord.templateCodeId
      this.hisTemplateCodeId = this.selectHisRecord.id
      this.preCode = this.selectHisRecord.hisContent
      this.currentCode = this.selectHisRecord.currentContent
      this.initUI(this.currentCode,this.preCode)
    },
    methods: {
      closeCodeCompareDialog(){
        this.$emit('par', 'closeCodeCompareDialog')
      },
      saveUpdate(){
        let _this = this
        let codeValue = this.coder.edit.getValue()
        this.$confirm('是否确认回滚当前内容','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          _this.fullscreenLoading = true
          return updateCodeTemplate(_this.templateCodeId,codeValue)
        }).then(data => {
          _this.$message({
            showClose: true,
            message: data.data ? '回滚成功':"回滚失败",
            type:data.data ? 'success':'error'
          })
          if( data.data ){
            _this.$emit('par', 'closeCodeCompareDialog');
          }
          this.fullscreenLoading = false
        }).catch(function(err) {
          _this.fullscreenLoading = false
        })
      },
      initUI (value, orig2) {
        let target = document.getElementById('view')
        target.innerHTML = ''
        this.coder = CodeMirror.MergeView(target, {
          value: value, // 上次内容
          origLeft: null,
          orig: orig2, // 本次内容
          lineNumbers: true, // 显示行号
          mode: 'javascript',
          highlightDifferences: true,
          showDifferences: true,
          connect: 'align',
          revertButtons: true, // 是否显示还原按钮
          readOnly: false// 只读 不可修改
        })
      }
    }
  }
</script>
